<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>寻找同年同月同日（同名）的TA</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f7f7f7;
            color: #333;
            margin: 0;
            padding: 10px;
        }

        .container {
            max-width: 600px;
            margin: auto;
            padding: 10px;
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            box-sizing: border-box;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        input[type="text"],
        input[type="number"] {
            padding: 10px;
            width: 100%;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .birthday-group {
            display: flex;
            justify-content: space-between;
        }

        .birthday-group input {
            width: calc(33.33% - 10px);
            margin-right: 10px;
        }

        .birthday-group input:last-child {
            margin-right: 0;
        }

        .button,
        .action-button {
            display: block;
            padding: 10px;
            width: 100%;
            margin-top: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            box-sizing: border-box;
        }

        .action-button {
            display: inline-block;
            width: 48%;
            margin-top: 10px;
            box-sizing: border-box;
        }

        .delete-button {
            background-color: #f44336;
        }

        .edit-button {
            background-color: #2196F3;
        }

        .add-button {
            background-color: #2196F3;
            margin-right: 10px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        th,
        td {
            border-bottom: 1px solid #eee;
            padding: 12px 15px;
            text-align: left;
        }

        th {
            background-color: #f0e68c;
            color: #333;
        }

        td {
            background-color: #fff;
            color: #666;
        }

        .hidden-row {
            display: none;
        }

        .toggle-button {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }

        /* 弹窗样式 */
        .message {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            padding: 10px 20px;
            color: #333;
            font-size: 16px;
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 300px;
        }

        .message.success {
            border-left: 5px solid #4CAF50;
        }

        .message.error {
            border-left: 5px solid #f44336;
        }

        .message button {
            background: none;
            border: none;
            font-size: 16px;
            cursor: pointer;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.5);
            align-items: center;
            justify-content: center;
        }

        .modal-content {
            background-color: #fefefe;
            padding: 20px;
            border: 1px solid #888;
            border-radius: 4px;
            width: 80%;
            max-width: 300px;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        .modal input[type="text"],
        .modal input[type="number"] {
            width: 100%;
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
        }

        .pagination button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px;
            border-radius: 4px;
            cursor: pointer;
        }

        .pagination input {
            width: 50px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .pagination select {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
<div class="container">
    <h1 style="text-align: center;">寻找同年同月同日的TA</h1>
    <div class="form-row">
        <div class="form-group">
            <label for="name">真实姓名：</label>
            <input type="text" id="name" placeholder="模糊查询（可以不用传真实姓名，真实的方便找同名）">
        </div>
        <div class="form-group">
            <label>生日：</label>
            <div class="birthday-group">
                <input type="number" id="year" placeholder="年" min="1900" max="2099">
                <input type="number" id="month" placeholder="月" min="1" max="12">
                <input type="number" id="day" placeholder="日" min="1" max="31">
            </div>
        </div>
        <div class="form-group">
            <label for="douyin">抖音账号：</label>
            <input type="text" id="douyin" placeholder="模糊查询（抖音主页抖音账号，方便复制搜索）">
        </div>
        <div style="display: flex; justify-content: space-between;">
            <button class="button add-button" onclick="add()">添加</button>
            <button class="button" onclick="search()">搜索</button>
        </div>
    </div>
    <div class="pagination">
        <button onclick="prevPage()">上一页</button>
        <input type="number" id="page-number" value="1" onchange="goToPage()">
        <button onclick="nextPage()">下一页</button>
        <select id="page-size" onchange="changePageSize()">
            <option value="3">3条</option>
            <option value="5" selected>5条</option>
            <option value="10">10条</option>
        </select>
    </div>
    <div class="table-container">
        <table id="data-table">
            <tr>
                <th>序号</th>
                <th>真实姓名</th>
                <th>生日</th>
                <th>操作</th>
            </tr>
            <!-- 数据行将通过JavaScript动态添加 -->
        </table>
    </div>
</div>

<div id="message-container"></div>

<!-- 模态框 -->
<div id="modal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal()">&times;</span>
        <h2 id="modal-title">输入信息</h2>
        <input type="text" id="modal-input" placeholder="请输入">
        <button class="button" onclick="modalConfirm()">确认</button>
    </div>
</div>

<script>
    let modalCallback;
    let modalInputType = 'text';
    let currentItem = {}; // 用于存储当前要编辑的项目
    let currentPage = 1; // 当前页码
    let pageSize = 5; // 每页显示条数

    function showMessage(message, type = 'success') {
        const messageContainer = document.getElementById('message-container');
        const messageElement = document.createElement('div');
        messageElement.className = `message ${type}`;
        messageElement.innerHTML = `
                <span>${message}</span>
                <button onclick="this.parentElement.remove()">x</button>
            `;
        messageContainer.appendChild(messageElement);
        setTimeout(() => {
            messageElement.remove();
        }, 3000);
    }

    function showModal(title, inputType, callback) {
        document.getElementById('modal-title').innerText = title;
        const modalInput = document.getElementById('modal-input');
        modalInput.value = '';
        modalInput.type = inputType;
        modalCallback = callback;
        document.getElementById('modal').style.display = 'flex';
    }

    function closeModal() {
        document.getElementById('modal').style.display = 'none';
    }

    function modalConfirm() {
        const input = document.getElementById('modal-input').value;
        closeModal();
        if (modalCallback) modalCallback(input);
    }

    function copyToClipboard(text) {
        navigator.clipboard.writeText(text).then(function() {
            showMessage('复制成功', 'success');
        }, function() {
            showMessage('复制失败', 'error');
        });
    }

    function search(page = 1) {
        const name = document.getElementById('name').value;
        const year = document.getElementById('year').value;
        const month = document.getElementById('month').value;
        const day = document.getElementById('day').value;
        const douyin = document.getElementById('douyin').value;

        fetch(`https://tannic.fun/birthday-match/birthday?page=${page}&limit=${pageSize}&year=${year}&month=${month}&day=${day}&realName=${name}&dyAccount=${douyin}`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        })
            .then(response => response.json())
            .then(data => {
                if (data.code === 0) {
                    currentPage = page;
                    document.getElementById('page-number').value = currentPage;
                    const table = document.getElementById('data-table');
                    // 清空现有数据
                    table.innerHTML = `
                        <tr>
                            <th>序号</th>
                            <th>真实姓名</th>
                            <th>生日</th>
                            <th>操作</th>
                        </tr>
                    `;
                    data.data.forEach((item, index) => {
                        const newRow = table.insertRow(-1);
                        newRow.innerHTML = `
                            <td>${index + 1}</td>
                            <td>${item.realName}</td>
                            <td>${item.year}-${item.month}-${item.day}</td>
                            <td>
                                <button class="toggle-button" onclick="toggleDetails(this)">展开</button>
                            </td>
                        `;
                        const detailsRow = table.insertRow(-1);
                        detailsRow.className = 'hidden-row';
                        detailsRow.innerHTML = `
                            <td colspan="4">
                                <div>抖音账号: ${item.dyAccount} <button onclick="copyToClipboard('${item.dyAccount}')">复制</button></div>
                                <div>创建时间: ${item.createTime}</div>
                                <div>修改时间: ${item.updateTime}</div>
                                <button class="action-button edit-button" onclick='edit(${JSON.stringify(item)})'>修改</button>
                                <button class="action-button delete-button" onclick="verifyAndRemove(this, ${item.id}, '${item.uniIdentification}')">删除</button>
                            </td>
                        `;
                    });
                    showMessage('查询成功', 'success');
                } else {
                    showMessage(data.resp_msg, 'error');
                }
            })
            .catch(error => {
                showMessage('查询失败，请稍后重试。', 'error');
            });
    }

    function toggleDetails(button) {
        const detailsRow = button.parentNode.parentNode.nextElementSibling;
        if (detailsRow.classList.contains('hidden-row')) {
            detailsRow.classList.remove('hidden-row');
            button.textContent = '收起';
        } else {
            detailsRow.classList.add('hidden-row');
            button.textContent = '展开';
        }
    }

    function prevPage() {
        if (currentPage > 1) {
            search(currentPage - 1);
        }
    }

    function nextPage() {
        search(currentPage + 1);
    }

    function goToPage() {
        const page = parseInt(document.getElementById('page-number').value);
        if (page > 0) {
            search(page);
        }
    }

    function changePageSize() {
        pageSize = parseInt(document.getElementById('page-size').value);
        search(1); // 重新从第一页开始搜索
    }

    function edit(item) {
        currentItem = item;
        showModal("请输入真实姓名（可以不用传真实姓名，真实的方便找同名）", 'text', updateRealName);
    }

    function updateRealName(name) {
        if (name !== null) currentItem.realName = name;
        showModal("请输入年份(1900~2099)", 'number', updateYear);
    }

    function updateYear(year) {
        if (year !== null && year >= 1900 && year <= 2099) currentItem.year = year;
        showModal("请输入月份(01~12)", 'number', updateMonth);
    }

    function updateMonth(month) {
        if (month !== null && month >= 1 && month <= 12) currentItem.month = month;
        showModal("请输入日期(01~31)", 'number', updateDay);
    }

    function updateDay(day) {
        if (day !== null && day >= 1 && day <= 31) currentItem.day = day;
        showModal("请输入抖音账号（抖音主页抖音账号，方便复制搜索）", 'text', updateDouyin);
    }

    function updateDouyin(douyin) {
        if (douyin !== null) currentItem.dyAccount = douyin;
        showModal("请输入唯一标识（用于管理自己的信息,请记住！）", 'text', updateUniIdentification);
    }

    function updateUniIdentification(uni) {
        if (uni !== null) currentItem.uniIdentification = uni;

        fetch(`https://tannic.fun/birthday-match/birthday/saveOrUpdateRole`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(currentItem)
        })
            .then(response => response.json())
            .then(data => {
                if (data.resp_code === 0) {
                    showMessage('修改成功', 'success');
                    search(currentPage); // 重新加载当前页数据
                } else {
                    showMessage(data.resp_msg, 'error');
                }
            })
            .catch(error => {
                showMessage('修改失败，请稍后重试。', 'error');
            });
    }

    function verifyAndRemove(button, id, originalUniIdentification) {
        showModal("请输入唯一标识进行删除验证", 'text', (uniIdentification) => {
            fetch(`https://tannic.fun/birthday-match/birthday/verifyUniIdentification`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ id: id, uniIdentification: uniIdentification })
            })
                .then(response => response.json())
                .then(data => {
                    if (data.resp_code === 0) {
                        remove(id, uniIdentification);
                    } else {
                        showMessage(data.resp_msg, 'error');
                    }
                })
                .catch(error => {
                    showMessage('验证失败，请稍后重试。', 'error');
                });
        });
    }

    function remove(id, uniIdentification) {
        if (confirm("确定要删除这条记录吗？")) {
            fetch(`https://tannic.fun/birthday-match/birthday/delete`, {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: new URLSearchParams({ id: id, uniIdentification: uniIdentification })
            })
                .then(response => response.json())
                .then(data => {
                    if (data.resp_code === 0) {
                        showMessage('删除成功', 'success');
                        search(currentPage); // 重新加载当前页数据
                    } else {
                        showMessage(data.resp_msg, 'error');
                    }
                })
                .catch(error => {
                    showMessage('删除失败，请稍后重试。', 'error');
                });
        }
    }

    function add() {
        const newItem = {
            day: "",
            dyAccount: "",
            month: "",
            realName: "",
            uniIdentification: "",
            year: ""
        };
        showModal("请输入真实姓名（可以不用传真实姓名，真实的方便找同名）", 'text', (name) => {
            newItem.realName = name;
            showModal("请输入年份(1900~2099)", 'number', (year) => {
                if (year === null || year < 1900 || year > 2099) {
                    showMessage('年份不合法，请输入1900到2099之间的年份', 'error');
                    return;
                }
                newItem.year = year;
                showModal("请输入月份(01~12)", 'number', (month) => {
                    if (month === null || month < 1 || month > 12) {
                        showMessage('月份不合法，请输入1到12之间的月份', 'error');
                        return;
                    }
                    newItem.month = month;
                    showModal("请输入日期(01~31)", 'number', (day) => {
                        if (day === null || day < 1 || day > 31) {
                            showMessage('日期不合法，请输入1到31之间的日期', 'error');
                            return;
                        }
                        newItem.day = day;
                        showModal("请输入抖音账号（抖音主页抖音账号，方便复制搜索）", 'text', (douyin) => {
                            newItem.dyAccount = douyin;
                            showModal("请输入唯一标识（用于管理自己的信息，请记住！）", 'text', (uni) => {
                                newItem.uniIdentification = uni;

                                fetch(`https://tannic.fun/birthday-match/birthday/saveOrUpdateRole`, {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json'
                                    },
                                    body: JSON.stringify(newItem)
                                })
                                    .then(response => response.json())
                                    .then(data => {
                                        if (data.resp_code === 0) {
                                            showMessage('新增成功', 'success');
                                            search(currentPage); // 重新加载当前页数据
                                        } else {
                                            showMessage(data.resp_msg, 'error');
                                        }
                                    })
                                    .catch(error => {
                                        showMessage('新增失败，请稍后重试。', 'error');
                                    });
                            });
                        });
                    });
                });
            });
        });
    }

    window.onload = function() {
        search(); // 页面加载完成后自动调用查询
    };
</script>
</body>

</html>
